﻿<template>
    <div class="person">
    <h2>需求：当水温达到60℃或者水位达到80cm时，报警</h2>
    <h2>当前水温：{{ temp }}℃</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">水温升高</button>
    <button @click="changeHeight">水位升高</button>
   </div>
</template>



<script lang = "ts" setup name="Person">
    // ref 基本类型 和对象类型
    // reactive 对象，Proxy 原生代理，reactive 是深层次的
    import { ref,reactive ,toRefs,computed,watch, watchEffect} from 'vue';
    
    let temp = ref(37)
    let height = ref(0)
    
    function changeTemp(){
        temp.value += 1
    }
    function changeHeight(){
        height.value += 10
    }
    // watch([temp,height],(newValue,oldValue)=>{
    //     console.log("数值变化：",newValue,oldValue)
    // })

    // watch([temp,height],(newValue)=>{
    //     console.log("数值变化：",newValue)
    // })    

    // watch([temp,height],(newValue)=>{
    //     // 从value中获取最新的最新的温度和水位值
    //     let [newTemp,newHeight] = newValue
    //     console.log("数值变化：",newValue)
    //     if(newTemp>=40||newHeight>=80){
    //         console.log("报警变化")
    //     }
    // })    

    watchEffect(()=>{
        if(temp.value >= 40||height.value >= 80){
            console.log("报警变化")
        }
    })
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>